import { defineConfig, loadEnv } from 'vite'
import path, { resolve } from 'path'
// vue
import vue from '@vitejs/plugin-vue'

// JSX
import vueJsx from '@vitejs/plugin-vue-jsx'

// html内容调整 插件
import { createHtmlPlugin } from 'vite-plugin-html'

// 压缩插件
import viteCompression from 'vite-plugin-compression'

// ui自动导入插件
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// setup name 增强
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// 自动导入composition api
import AutoImport from 'unplugin-auto-import/vite'
import { autoImportList, lodashList } from './src/utils/autoImport'

// 将css转换成兼容多种浏览器的样式
import postcssPresetEnv from 'postcss-preset-env'

// 自定义svg图标
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// https://vitejs.dev/config/
export default ({ mode }) => {
	// 环境变量
	const env = loadEnv(mode, process.cwd())
	// 生产环境判断
	const isEnvProduction = ['production'].includes(mode)
	// vite插件
	const plugins = [
		vue(),
		vueJsx(),
		VueSetupExtend(),
		/**
		 *  注入环境变量到html模板中
		 *  如在  .env文件中有环境变量  VITE_APP_TITLE=admin
		 *  则在 html模板中  可以这样获取  <%- VITE_APP_TITLE %>
		 *  文档：  https://github.com/anncwb/vite-plugin-html
		 */
		createHtmlPlugin({
			inject: {
				data: {
					TITLE: 'THREEJS',
					injectScript: `<script src="/config.js?v=${new Date().getTime()}"></script>`
				}
			},
			minify: true
		}),
		/**
		 * ui按需加载(自动导入)自动导入Vite的按需组件
		 */
		Components({
			resolvers: [ElementPlusResolver()],
			dts: '.components.d.js'
		}),
		// 自动导入vue和vue-router相关函数
		AutoImport({
			imports: [
				'vue',
				'vue-router',
				'@vueuse/core',
				{
					// 使用的时候才会自动导入，检查js代码
					'@/utils/autoImport': autoImportList,
					lodash: lodashList
				}
			], // 自动导入vue和vue-router相关函数
			resolvers: [ElementPlusResolver()],
			dts: '.auto-import.d.js' // 生成 `auto-import.d.js` 全局声明
		}),
		createSvgIconsPlugin({
			// 指定要缓存的图标文件夹
			iconDirs: [resolve(process.cwd(), 'src/assets/svg')],
			// 执行icon name的格式
			symbolId: 'icon-[name]'
		})
	]

	if (isEnvProduction) {
		plugins.push(
			// gzip插件，打包压缩代码成gzip  文档： https://github.com/anncwb/vite-plugin-compression
			viteCompression()
		)
	}

	// 打包环境
	let build = {
		outDir: 'dist',
		reportCompressedSize: false,
		rollupOptions: {
			output: {
				// 包的入口文件名称
				entryFileNames: 'js/[name]-[hash].js',
				// 引入文件名的名称
				chunkFileNames: 'js/[name]-[hash].js',
				// 资源文件像 字体，图片等
				assetFileNames: (chunkInfo) => {
					if (['.png', '.jpg', '.jpeg', '.gif', '.svg', ',webp'].includes(path.extname(chunkInfo.name))) {
						return `img/[name]-[hash].[ext]`
					}
					if (['.css'].includes(path.extname(chunkInfo.name))) {
						return `css/[name]-[hash].[ext]`
					}
					return `[ext]/[name]-[hash].[ext]`
				}
			}
		}
	}

	return defineConfig({
		// 基础路径，配合vue-router的createWebHashHistory使用
		base: isEnvProduction ? '/' : './',
		css: {
			preprocessorOptions: {
				scss: {
					api: 'modern-compiler',
					charset: false,
					javascriptEnabled: true,
					additionalData: `@import "@/style/mixin/index.scss";`
				}
			},
			postcss: {
				plugins: [postcssPresetEnv()]
			}
		},
		plugins,
		build,
		server: {
			host: '0.0.0.0',
			port: 5000,
			open: true,
			proxy: {
				// 设置代理
				[env.VITE_APP_BASE_API]: {
					target: env.VITE_APP_TARGET,
					changeOrigin: true,
					rewrite: (path) => path.replace(env.VITE_APP_BASE_API, env.VITE_APP_TI)
				}
			}
		},
		// alias 现在会被传递给 @rollup/plugin-alias 并不再需要开始/结尾处的斜线了。
		// 此行为目前是一个直接替换，所以 1.0 风格的目录别名需要删除其结尾处的斜线：
		resolve: {
			alias: {
				// 如果报错__dirname找不到，需要安装node,执行yarn add @types/node --save-dev
				'@': resolve(__dirname, 'src'),
				'@a': resolve(__dirname, 'src/api'),
				'@u': resolve(__dirname, 'src/utils'),
				'@c': resolve(__dirname, 'src/components'),
				'@s': resolve(__dirname, 'src/store')
			}
		}
	})
}
